<template>
  <basic-container class="positivefeedback">
    <div class="positivefeedbackfifter">
      <el-form :inline="true" :model="positivefeedbackform">
        <el-form-item label="平台单号:">
          <el-input placeholder="请输入平台单号" v-model.trim="positivefeedbackform.xmbzNo" size="small" clearable
            @keyup.enter.native='handleFilter(Launchdate)'>
          </el-input>
        </el-form-item>
        <el-form-item label="城市:">
          <el-select v-model.trim="positivefeedbackform.cityId" size="small" clearable placeholder="请选择城市"
            @visible-change='getdeptdepts' ref='cityIdRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in cityList" :key="item.id" size="small" :label="item.deptName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态:">
          <el-select v-model.trim="positivefeedbackform.status" size="small" clearable placeholder="请选择审核状态"
            @visible-change='getOrderpraisestatus' ref='statusRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in orderpraisestatusList" :key="item.dictKey" size="small" :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="红包发放状态:">
          <el-select v-model.trim="positivefeedbackform.sendState" size="small" clearable placeholder="请选择红包发放状态"
            @visible-change='getPraisesendstate' ref='sendStateRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in praisesendstateList" :key="item.dictKey" size="small" :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交日期">
          <el-date-picker v-model="Launchdate" type="daterange" size="small" range-separator="至" start-placeholder="开始日期"
            :clearable='false' end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="渠道类别:">
          <el-select v-model.trim="channelTypeidName" clearable size="small" placeholder="请选择渠道类别" @visible-change='getOrderChannelTypeList'
            @change="handleChannelTypeId" ref='channelTypeidNameRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in OrderChannelTypeLists" :key="item.channelKey" size="small" :label="item.channelName"
              :value="{label:item.id,value:item.channelKey,name:item.channelName}">
            </el-option>
          </el-select>
          <!-- channel -->
        </el-form-item>
        <el-form-item label="渠道:">
          <el-select v-model.trim="positivefeedbackform.channelId" clearable filterable size="small" placeholder="请选择渠道"
            @visible-change='getOrderChannelList' ref='channelNameRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in OrderChannelLists" :key="item.channelKey" size="small" :label="item.channelName"
              :value="item.channelKey">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Launchdate)">查询</el-button>
          <el-button type="success" plain size="small" onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}" @click="handleExport(positivefeedbackform,Launchdate)">导出数据</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="positivefeedbackmain">
      <el-table :data="positivefeedbackList" style="width: 100%">
        <el-table-column prop="xmbzNo" label="平台单号" align="left" min-width="60">
        </el-table-column>
        <el-table-column label="城市" align="center" min-width="50">
          <template slot-scope="scope">
            <span v-if='scope.row.cityName'>{{scope.row.cityName}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="渠道" min-width="60" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.channelName'>{{scope.row.channelName}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" min-width="70" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="success" plain v-if="scope.row.status=='3'">{{scope.row.statusName}}</el-button>
            <el-button size="small" type="danger" plain v-if="scope.row.status=='2'">{{scope.row.statusName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="发放状态" min-width="58" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="info" plain v-if="scope.row.sendState=='0'">{{scope.row.sendStateName}}</el-button>
            <el-button size="small" type="success" plain v-if="scope.row.sendState=='1'">{{scope.row.sendStateName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="红包金额" min-width="60" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.amount'>{{scope.row.amount}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="当天好评数" min-width="80" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.dayCount'>{{scope.row.dayCount}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="当月好评数" min-width="80" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.monthCount'>{{scope.row.monthCount}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" min-width="140px" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.createTime'>{{scope.row.createTime}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="approvalTime" label="审核时间" min-width="140px" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.approvalTime'>{{scope.row.approvalTime}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="审核人" min-width="50" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.approvalName'>{{scope.row.approvalName}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="110" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.remarkInfo'>{{scope.row.remarkInfo}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="微信账单号" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.wxBillNo'>{{scope.row.wxBillNo}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="提交人" align="center">
          <template slot-scope="scope">
            <span v-if='scope.row.nickName'>{{scope.row.nickName}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="好评图" align="center" min-width="60">
          <template slot-scope="scope">
            <img :src="scope.row.filePraisePath" alt="" @click="handlePictureCardPreview(scope.row.filePraisePath)">
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" min-width="48">
          <template slot-scope="scope">
            <el-button type="info" size="small" @click='handleAudit(scope.row)' v-if="scope.row.status=='1'" style="padding: 8px 10px!important;">审核</el-button>
            <div v-else>-</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="positivefeedbackform.page" :limit.sync="positivefeedbackform.size"
        layout="sizes,prev, pager, next,total" @pagination="getpositivefeedbackList" />
    </div>
    <el-dialog title="审核" center :visible.sync="dialogpositivefeedback" class="dialogpositivefeedback">
      <el-form :model="dialogpositivefeedbackform" ref="dialogpositivefeedbackform">
        <el-form-item label="审核:" :label-width="formLabelWidth">
          <el-radio v-model="dialogpositivefeedbackform.status" label="3">审核通过</el-radio>
          <el-radio v-model="dialogpositivefeedbackform.status" label="2">审核不通过</el-radio>
        </el-form-item>
        <el-form-item label="退款金额:" :label-width="formLabelWidth" v-if="dialogpositivefeedbackform.status=='3'">
          <el-radio v-model="dialogpositivefeedbackform.price" border label="2.68">2.68</el-radio>
          <el-radio v-model="dialogpositivefeedbackform.price" border label="5.20">5.20</el-radio>
        </el-form-item>
        <el-form-item label="审核失败原因:" :label-width="formLabelWidth" v-if="dialogpositivefeedbackform.status=='2'">
          <el-radio v-model="dialogpositivefeedbackform.reason" border label="抱歉，你的好评返现截图不正确，请重新提交" style="margin-bottom: 10px;">抱歉，你的好评返现截图不正确，请重新提交</el-radio>
          <br>
          <el-radio v-model="dialogpositivefeedbackform.reason" border label="抱歉，你的信息提交有误，请重新提交" style="margin-bottom: 10px;">抱歉，你的信息提交有误，请重新提交</el-radio><br>
          <el-radio v-model="dialogpositivefeedbackform.reason" border label="其他" style="margin-bottom: 10px;">其他</el-radio>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth" v-if="dialogpositivefeedbackform.reason=='其他'" prop="reasontextarea">
          <el-input v-if="dialogpositivefeedbackform.status=='2'" resize='none' type="textarea" placeholder="请输入审核不通过的原因"
            v-model.trim="dialogpositivefeedbackform.reasontextarea" maxlength="64" show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="positivefeedbackSummit('dialogpositivefeedbackform')">提交</el-button>
        <el-button @click="resetForm('dialogpositivefeedbackform')">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </basic-container>
</template>

<script>
  import Pagination from "@/components/Pagination";
  import {
    //接口
    getOrdersPraiseQueryPageList,
    praisesendstate, //红包发放状态
    orderpraisestatus, //好评返现审核状态
    OrderChannelTypeList, //渠道类别
    getOrderChannelLists, //渠道
    deptdepts, //城市
    applyOrdersPraise, //审核
  } from "@/api/workorder";
  export default {
    data() {
      return {
        positivefeedbackform: {
          xmbzNo: '', //平台单号
          cityId: '', //城市
          status: '', // 审核状态
          sendState: '', //红包发放状态
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD")
            .toString(), //提交的开始时间
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD")
            .toString(), //提交的结束时间
          channelTypeId: '', //渠道类型id
          channelId: '', //渠道id
          page: 1,
          size: 10,

        },
        total: 0,
        positivefeedbackList: [],
        // 弹层
        formLabelWidth: '120px',
        dialogpositivefeedback: false,
        dialogpositivefeedbackform: {
          status: '3',
          price: '2.68',
          reason: '其他',
          reasontextarea: '',
        },
        // 图片
        dialogImageUrl: '',
        dialogVisible: false,
        praisesendstateList: [], //红包发放状态
        orderpraisestatusList: [], //好评返现审核状态
        OrderChannelTypeLists: [], //渠道列表
        OrderChannelLists: [], //渠道
        cityList: [],
        applyOrdersIds: '', //审核ID
        channelTypeidName: '', //
        channelTypeidIds: '',
        channelTypeidTypes: '',
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
      }
    },

    components: {
      Pagination
    },
    mounted() {
      this.getpositivefeedbackList();
      if (this.dialogpositivefeedback == false) {
        window.addEventListener("keydown", this.keyupEnter);
      } else {
        window.removeEventListener("keydown", this.keyDown, false);
      }
    },
    destroyed() {
      window.removeEventListener("keydown", this.keyDown, false);
    },
    methods: {
      // 选择框回车失焦
      selectBlur(e) {
        if (e.keyCode == 13) {
          this.$refs['cityIdRef'].blur();
          this.$refs['channelTypeidNameRef'].blur();
          this.$refs['channelNameRef'].blur();
          this.$refs['statusRef'].blur();
          this.$refs['sendStateRef'].blur();
          e.returnValue = false;
        }
      },
      // 回车事件
      keyupEnter() {
        if (this.dialogpositivefeedback == false) {
          if (window.event.keyCode == 13) {
            this.handleFilter(this.Launchdate); // 查询事件
          }
        }else{
          window.removeEventListener("keydown", this.keyDown, false);
        }

      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },
      // 查询下拉部分---------------------------------------------------------
      getPraisesendstate() { //红包发放状态
        praisesendstate().then(res => {
          this.praisesendstateList = res.data.data
        })
      },
      getOrderpraisestatus() {
        orderpraisestatus().then(res => {
          this.orderpraisestatusList = res.data.data
        })
      },
      getOrderChannelTypeList() {
        OrderChannelTypeList().then(res => {
          this.OrderChannelTypeLists = res.data.data
        })
      },
      handleChannelTypeId(data) {
        if (data) {
          // this.positivefeedbackform.channelTypeId = data
          this.channelTypeidIds = data.label;
          this.channelTypeidTypes = data.value;
          this.channelTypeidName = data.name;
        } else {
          this.positivefeedbackform.channelTypeId = '';
          this.positivefeedbackform.channelId = ''
          this.OrderChannelLists = [];
        }
      },
      getOrderChannelList() {
        if (this.channelTypeidName == '') {
          this.$message({
            type: "warning",
            message: "请先选择渠道类别!"
          });
          this.positivefeedbackform.channelTypeId = ''
          return false;
        } else {
          getOrderChannelLists({
            parentId: this.channelTypeidIds
          }).then(res => {
            this.OrderChannelLists = res.data.data
          })
        }
      },
      getdeptdepts() { //
        deptdepts().then(res => {
          this.cityList = res.data.data
        })
      },
      getpositivefeedbackList() { //获取列表数据
        getOrdersPraiseQueryPageList(this.positivefeedbackform).then(res => {
          this.positivefeedbackList = res.data.data.rows;
          this.total = res.data.data.total;
        })
      },
      handleFilter(times) { //查询数据
        this.positivefeedbackform.page = 1;
        this.positivefeedbackform.channelTypeId = this.channelTypeidTypes;
        if (times) {
          this.positivefeedbackform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.positivefeedbackform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.dayjs(
            times[0]
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString());
        var time2 = Date.parse(this.dayjs(
            times[1]
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString());
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount >= 31) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getpositivefeedbackList();
        }
      },
      handleExport(item, times) { //导出数据
        const {
          user
        } = this.$store.state
        if (item.cityId) {
          item.cityId = item.cityId
        } else {
          item.cityId = ''
        }
        if (item.status) {
          item.status = item.status
        } else {
          item.status = ''
        }
        if (item.sendState) {
          item.sendState = item.sendState
        } else {
          item.sendState = ''
        }
        if (item.channelTypeId) {
          item.channelTypeId = item.channelTypeId
        } else {
          item.channelTypeId = ''
        }
        if (item.channelId) {
          item.channelId = item.channelId
        } else {
          item.channelId = ''
        }
        if (times) {
          this.positivefeedbackform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.positivefeedbackform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.dayjs(
            times[0]
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString());
        var time2 = Date.parse(this.dayjs(
            times[1]
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString());
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        // console.log(dayCount)
        if (dayCount >= 31) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          window.open(
            `/api/xmbz-order/OrdersPraise/export?xmbzNo=${item.xmbzNo}&cityId=${item.cityId}&status=${item.status}&sendState=${item.sendState}&startTime=${this.positivefeedbackform.startTime}&endTime=${this.positivefeedbackform.endTime}&channelTypeId=${item.channelTypeId}&channelId=${item.channelId}&blade-auth=bearer ${user.userInfo.accessToken}`
          );

        }

      },

      handlePictureCardPreview(file) { //图片放大
        this.dialogImageUrl = file;
        this.dialogVisible = true;
      },

      handleAudit(row) { //审核页面弹窗
        this.dialogpositivefeedbackform = {
          status: '3',
          price: '2.68',
          reason: '其他',
          reasontextarea: '',
        }
        this.dialogpositivefeedback = true
        this.applyOrdersIds = row.id
      },
      resetForm(formName) {
        this.dialogpositivefeedback = false;
        this.$refs[formName].resetFields();
      },
      positivefeedbackSummit(formName) { //提交
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.dialogpositivefeedbackform.status == '2') { //审核不通过
              const applyOrders = {
                id: this.applyOrdersIds,
                status: 2,
                remark: this.dialogpositivefeedbackform.reasontextarea,
                examineFail: this.dialogpositivefeedbackform.reason
              }
              if (this.dialogpositivefeedbackform.reason == '其他') {
                if (this.dialogpositivefeedbackform.reasontextarea == '') {
                  this.$message({
                    type: "warning",
                    message: "请输入审核不通过的原因!!"
                  });
                  return false
                } else {
                  applyOrdersPraise(applyOrders).then(res => {
                    if (res.data.code == '200') {
                      this.$message({
                        type: "success",
                        message: "提交审核成功!"
                      });
                      this.dialogpositivefeedback = false
                      this.getpositivefeedbackList();
                      this.$refs[formName].resetFields();
                    } else {
                      this.$message({
                        type: "warning",
                        message: "提交审核失败!"
                      });

                    }
                  })
                }
              } else {
                applyOrdersPraise(applyOrders).then(res => {
                  if (res.data.code == '200') {
                    this.$message({
                      type: "success",
                      message: "提交审核成功!"
                    });
                    this.dialogpositivefeedback = false
                    this.getpositivefeedbackList();
                    this.$refs[formName].resetFields();

                  } else {
                    this.$message({
                      type: "warning",
                      message: "提交审核失败!"
                    });

                  }
                })
              }
            } else {
              const applyOrders = {
                id: this.applyOrdersIds,
                status: 3,
                amount: this.dialogpositivefeedbackform.price
              }
              applyOrdersPraise(applyOrders).then(res => {
                if (res.data.code == '200') {
                  this.$message({
                    type: "success",
                    message: "提交审核成功!"
                  });
                  this.dialogpositivefeedback = false
                  this.getpositivefeedbackList();
                } else {
                  this.$message({
                    type: "success",
                    message: "提交审核失败!"
                  });

                }

              })

            }

          }
        });




      },

    }

  }
</script>

<style lang="scss" scoped>
  .positivefeedback {
    padding: 10px;

    .positivefeedbackfifter {
      display: flex;

      .el-form-item {
        margin-bottom: 22px !important;
      }
    }

    .el-table .cell {
      padding: 0 2px !important;

      .el-button--small,
      .el-button--small.is-round {
        padding: 5px 3px !important;
      }
    }

    .positivefeedbackmain {
      img {
        transform: scale(1);
        /*图片原始大小1倍*/
        transition: all ease 0.5s;
        width: 50px;
        height: 50px;
        vertical-align: middle;
      }

      &.active {
        transform: scale(3);
        /*图片需要放大3倍*/
        position: absolute;
        /*是相对于前面的容器定位的，此处要放大的图片，不能使用position：relative；以及float，否则会导致z-index无效*/
        z-index: 100;
      }
    }

    .dialogpositivefeedback {
      .el-dialog__header {
        border-bottom: 1px solid #c7c6c6;
      }

    }
  }
</style>
